import React, { useEffect, useState } from 'react';
// http
import { HTTP } from "@awesome-cordova-plugins/http";
import {
  IonContent,
  IonHeader,
  IonButton,
  IonPage,
  IonTitle,
  IonToolbar,
  IonList,
  IonLabel,
  IonListHeader,
  IonIcon
} from '@ionic/react';
import { ellipsisHorizontal } from 'ionicons/icons';
import indexStyleClass from './Home.module.scss';
import IndexBottomCom from '../components/tabbar/indexBottom';
import IndexList from "../components/commentList/index";
import TopSwiper from "../components/swiper/index"
// data
const Home = (props) => {
  const JSONDATA = require('../data/articeList.json');
  const [Uldata, setUldata] = useState([]);
  const [option, setOption] = useState({
    page: 1,
    num: 10
  });
  // console.log(HTTP, props, 'http');
  // HTTP.get("http://ionic.io", {}, {}).then((res) => {
  //   console.log(res);
  // });
  //
  useEffect(() => {
    GetMoreListData();
  }, []);

  const GetMoreListData = () => {
    let TIME = null;
    TIME = setTimeout(() => {
      let beforeArr = Uldata
      setUldata([...JSONDATA.list, ...beforeArr]);
      clearTimeout(TIME);
    }, 1);
  };

  // 滚动到底部
  const scrollEvents = (e) => {
    console.log(e, '滚动视图');
  }
  return (
    <IonPage>
      {/*  */}
      <IonHeader>
        <IonToolbar>
          <IonTitle>
            {/*自定义样式*/}
            <div className={`${[indexStyleClass.headerCss].join(' ')}`}>头部玩家</div>
          </IonTitle>
        </IonToolbar>
      </IonHeader>
      {/* swiper */}
      <TopSwiper />
      <IonContent scrollEvents fullscreen onIonScrollEnd={scrollEvents}>
        {/*主体滚动列表*/}

        {/*-- List of Sliding Items --*/}
        {Uldata.length == 0 ? (
          <div>暂无内容</div>
        ) : (
            <IonList>
              <IonListHeader>
                <IonLabel>最棒文章</IonLabel>
                <IonButton fill="solid" onClick={GetMoreListData}>
                  <IonIcon icon={ellipsisHorizontal} />
                </IonButton>
              </IonListHeader>
              {/* 列表 */}
              <IndexList data={Uldata} history={props.history} />
            </IonList>
          )}
      </IonContent>
      {/* 底部导航 */}
      <IndexBottomCom activeIndex={0} parent={props} />
    </IonPage>
  );
};

export default Home;
